<template>
    <div class="login">
        <el-card style="width: 320px" shadow="always">
            
            <el-form v-if="type == 'ruleFormRef'" ref="ruleFormRef" label-position="top" :model="ruleForm" :rules="rules" label-width="auto" >
                <h3 class="text-center">新筑学社</h3>
                <el-divider />
                <el-form-item label="手机号码" prop="mobile">
                    <el-input v-model="ruleForm.mobile" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" />
                </el-form-item>
                <el-form-item class="text-center">
                    <div class="text-right width100"><el-link @click="type = 'ruleFormCodeRef'">扫码登录</el-link ><el-link class="ml5" @click="type = 'ruleFormMobileRef'">验证码登录</el-link></div>
                    <el-button class="width100 mt10" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                </el-form-item>
            </el-form>

            <el-form v-if="type == 'ruleFormMobileRef'" ref="ruleFormMobileRef" label-position="top" :model="ruleFormMobile" :rules="ruleMobiles" label-width="auto" >
                <h3 class="text-center">新筑学社登录</h3>
                <el-divider />
                <el-form-item label="手机号码" prop="mobile">
                    <el-col :span="16"><el-input v-model="ruleFormMobile.mobile" /></el-col>
                    <el-col :span="1"></el-col>
                    <el-col :span="7"><el-button class="width100" type="primary" @click="onSms()">发送验证码</el-button></el-col>
                </el-form-item>
                <el-form-item label="验证码" prop="verification_code">
                    <el-input v-model="ruleFormMobile.verification_code" />
                </el-form-item>
                <el-form-item class="text-center">
                    <div class="text-right width100"><el-link @click="type = 'ruleFormCodeRef'">扫码登录</el-link ><el-link class="ml5" @click="type = 'ruleFormRef'">密码登录</el-link></div>
                    <el-button class="width100 mt10" type="primary" @click="submitFormMobile(ruleFormMobileRef)">登录</el-button>
                </el-form-item>
            </el-form>

            <el-form v-if="type == 'ruleFormCodeRef'" ref="ruleFormMobileRef" label-position="top" :model="ruleFormMobile" :rules="ruleMobiles" label-width="auto" >
                <h3 class="text-center">新筑学社扫码登录</h3>
                <el-divider />
                <div>code</div>
            </el-form>
            <div><el-link @click="router.push({ name: 'register'})">注册</el-link></div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

import { ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import router from '../../router'
import http from '../../util/request'

interface RuleForm {
    mobile: string
    password: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    mobile: '',
    password: '',
})

interface ruleFormMobile {
    mobile: string
    password: string
    verification_code:string
}

const type = ref('ruleFormRef')
const ruleFormMobileRef = ref<FormInstance>()
const ruleFormMobile = reactive<ruleFormMobile>({
    mobile: '',
    password: '',
    verification_code:'',
})

const rules = reactive<FormRules<RuleForm>>({
    mobile: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { min: 11, max: 11, message: '手机号码格式错误', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码最少六位', trigger: 'blur' },
    ],
})

const ruleMobiles = reactive<FormRules<ruleFormMobile>>({
    mobile: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { min: 11, max: 11, message: '手机号码格式错误', trigger: 'blur' },
    ],
    verification_code: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码最少六位', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
        http.post('/login',ruleForm).then((response:any)=>{
            if(response.data.code == 200){
                localStorage.setItem('token',response.data.data.token)
                delete response.data.data.token
                localStorage.setItem('user',JSON.stringify(response.data.data))
                router.push({ name: 'user'})
                return;
            }
            ElMessageBox.alert(response.data.message, '提示', {
                confirmButtonText: 'OK',
            })
        })
        } else {
        console.log('error submit!', fields)
        }
    })
}

const submitFormMobile = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const onSms = () => {
    http.post('/sms',{mobile:ruleFormMobile.mobile}).then((response:any)=>{
        if(response.data.code == 200){
            ElMessageBox.alert(response.data.message, '提示', {
                confirmButtonText: '短信发送成功',
            })
        }
    })
}



</script>
<style scoped lang="scss">
.login{background-color: #409EFF;position: absolute;width: 100%;height: 100%;}
.el-card {margin:0px auto;margin-top: 10%;}
</style>

